<template>
  <!-- 搜索页面 -->
  <view class="search">
    <!-- 头部 -->
    <commenHead title="搜索" bgcolor="#FFFFFF" :isShow="true" titlecolor="black"></commenHead>
    <!-- 滚动部分 -->
    <scroll-view scroll-y="true" >
      <view>
        <!-- 搜索框 -->
        <view class="search-input">
          <text class="iconfont icon-sousou"></text>
          <input type="text" v-model="inputValue" placeholder="搜索歌曲" @input="getShowList"/>
        </view>
        <!-- 搜索显示 -->
        <view class="search-show" v-if="inputValue.length">
          <text class="show-title">搜索“{{inputValue}}”</text>
          <view class="search-item" v-for="item in showLists" :key=item.id @tap="navToPlay(item.id)">
            <text class="iconfont icon-sousou"></text>
            <text class="showSigle">{{item.name}}-{{item.artists[0].name}}</text>
          </view>
        </view>
        <view v-else>
          <!-- 历史记录 -->
          <view class="search-history">
            <view class="history-title">
              <text>历史记录</text>
              <text class="iconfont icon-icon"></text>
            </view>
            <view class="history-list">
              <text v-for="(item,index) in historyLists" :key=index>{{item.value}}</text>
            </view>
          </view>
          <!-- 热搜榜 -->
          <view class="search-hot">
          <text style="font-size: 36rpx;">热搜榜</text>
          <view class="hot-list" v-for="(item,index) in hotLists" :key="index">
            <text class="hot-title">{{index+1}}</text>
            <view class="hot-song">
              <text class="showSigle">{{item.searchWord}}</text>
              <text class="showSigle">{{item.content}}</text>
            </view>
            <text style="color: #BCBCBC;">{{item.score}}</text>
          </view>
        </view>
      </view>
      </view>
    </scroll-view>
  </view>
</template>

<script>
  import commenHead from '../../components/common-head/common-head.vue'
  import request from '../../common/request.js'
  export default {
    components:{commenHead},
    data() {
      return {
        inputValue:'',
        hotLists:[],
        showLists:[],
        historyLists:[],
      }
    },
    onLoad() {
      // 获取热搜列表
      request('/search/hot/detail').then(res=>{
        this.hotLists = res.data.data;
      });
      const temp = uni.getStorageSync('historyLists');
      if(temp){
        console.log(temp);
        this.historyLists = JSON.parse(temp)
      }
    },
    methods: {
      // 获取搜索相关内容
      getShowList:debounce(function(){
        this.getSearchLists();
      },300),
      // 执行的数据请求函数
      async getSearchLists(){
        if(this.inputValue){
          const {data} = await request(`/search?keywords=${this.inputValue}`);
          this.showLists = data.result.songs.slice(0,15);
        }
      },
      
      // 历史记录
      getHistoryList(){
        // 将搜索过的放进列表并且存到本地缓存中
        // 找到了就返回第一个下标，没有找到就返回-1
        const index = this.historyLists.findIndex(item=>item.value===this.inputValue)
        if(index === -1){
          let newObj = {value:this.inputValue}
          this.historyLists.push(newObj);
          // window.localStorage.setItem('historyLists',JSON.stringify(this.historyLists));
          uni.setStorageSync('historyLists',JSON.stringify(this.historyLists));
        }
      },
      // 跳转到播放页面
      navToPlay(id){
        console.log(id);
        this.getHistoryList();
        uni.navigateTo({
          url:`../play/play?id=${id}`
        })
      }
    },
  }
  
  // 防抖函数
  function debounce(func, wait) {
      let timeout;
      return function () {
          let context = this;
          let args = arguments;
          if (timeout) clearTimeout(timeout);
          timeout = setTimeout(() => {
              func.apply(context, args)
          }, wait);
      }
  } 
</script>

<style scoped>
.search scroll-view{
  height: calc(100vh - 150px);
  box-sizing: border-box;
  padding: 32rpx;
}

/* 搜索框 */
.search-input{
  position: relative;
  margin-bottom: 48rpx;
}
.search-input text{
  position: absolute;
  top: 50%;
  left: 20rpx;
  transform: translateY(-50%);
}
.search-input input{
   box-sizing: border-box;
  padding-left: 56rpx;
  background-color: #f7f7f7;
  width: 100%;
  height: 74rpx;
  border-radius: 20px;
  font-size: 28rpx;
}

/* 历史记录 */
.search-history{
  margin-bottom: 40rpx;
}
.search-history .history-title{
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 36rpx;
  font-size: 36rpx;
}
.history-title .icon-icon{
  font-size: 50rpx;
  color: #bcbcbc;
}
.history-list text{
  display: inline-block;
  padding: 20rpx 30rpx;
  color: #BCBCBC;
  background-color: #F7F7F7;
  border-radius:20px;
  font-size: 28rpx;
  margin-bottom: 20rpx;
  margin-right: 10rpx;
}

/* 热搜榜 */

.hot-list{
  width: 100%;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  margin-top: 46rpx;
}
.hot-list .hot-title{
  display: block;
  width: 76rpx;
  text-align: left;
}
.hot-list .hot-song{
  flex: 1;
  display: flex;
  flex-direction: column;
}

.hot-song text:first-child{
  font-size: 36rpx;
}

.hot-song text:last-child{
  font-size: 26rpx;
  color: #BCBCBC;
}

/* 搜索显示*/
.search-show{
  box-sizing: border-box;
  border-top: 1px solid #F7F7F7;
  padding-top: 10px;
  color: #333;
}
.search-show .show-title{
  color: #5281B5;
  display: block;
  margin-bottom: 10px;
  font-size: 32rpx;
}
.search-item{
  display: flex;
  align-items: center;
  margin-bottom: 20rpx;
  color: rgba(0,0,0,0.5);
  }
.search-item .icon-sousou{
  color: #BCBCBC;
  font-size: 36rpx;
  margin-right: 10px;
}

/* 单行显示 */
.showSigle{
  display: block;
  width: 500rpx;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
</style>

